import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 路由配置表  值是一个数组(一个路径对应一个组件  一个组件是一个单文件是以.vue结尾的)
const routes = [
  // {
  //   path: '/', //  路由重定向,用来控制跳转
  //   redirect: '/login'
  // },
  // 路由的配置是一个对象
  {
    path: '/', // 自定义的路径
    name: 'Layout',
    component: () => import('../views/layout/layout.vue'), // 路径要显示的组件
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('../views/home/home.vue'),
        meta: {
          title: '首页'
        }
      },
      {
        path: 'articles',
        name: 'articles',
        component: () => import('../views/articles/articles.vue'),
        meta: {
          title: '内容管理'
        }
      },
      {
        path: 'images',
        name: 'images',
        component: () => import('../views/images/images.vue'),
        meta: {
          title: '素材管理'
        }
      },
      {
        path: 'edit/:id',
        name: 'edit',
        component: () => import('../views/articles/edit.vue'),
        meta: {
          title: '编辑'
        }
      },
      {
        // 如果在path前没有/，则要拼接一级路由的path
        // 如果在path前加上/，则忽略（不用拼接）一级路由的path
        path: 'articleAdd',
        name: 'articleAdd',
        component: () => import('../views/articles/articleAdd.vue'),
        meta: {
          title: '发布文章'
        }
      },
      {
        // 如果在path前没有/，则要拼接一级路由的path
        // 如果在path前加上/，则忽略（不用拼接）一级路由的path
        path: 'comment',
        name: 'comment',
        component: () => import('../views/comment/comment.vue'),
        meta: {
          title: '评论管理'
        }
      },
      {
        // 如果在path前没有/，则要拼接一级路由的path
        // 如果在path前加上/，则忽略（不用拼接）一级路由的path
        path: 'fans',
        name: 'fans',
        component: () => import('../views/fans/fans.vue'),
        meta: {
          title: '粉丝管理'
        }
      },
      {
        // 如果在path前没有/，则要拼接一级路由的path
        // 如果在path前加上/，则忽略（不用拼接）一级路由的path
        path: 'settings',
        name: 'settings',
        component: () => import('../views/settings/settings.vue'),
        meta: {
          title: '个人管理'
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login/login.vue')
  },
  {
    path: '*',
    name: 'page404',
    component: () => import('../views/page404/page404.vue')
  }
]
// 创建路由实例
const router = new VueRouter({
  routes
})

// 路由守卫格式
// 只要是发生了路由的跳转（还没有进入到目标路由），就会执行这个回调
// to: 要跳入的路由信息。  你要去哪里
// from: 要跳出的路由信息。你从哪里来
// next: 是一个函数，放行方法
// next() : 正确跳转。允许进入到 to 路由
// next(路由地址) : 不允许去to，而转去指定的路由地址
// 如果没有调用next()，则页面就不能正常显示了
const authPageList = ['/', '/articles', '/images', 'edit']
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = 'HMPC' + to.meta.title
  }
  // 如果你登录了就可以看上面的页面
  // includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回fals
  if (authPageList.includes(to.path)) {
    console.log('发生了路由变化', from.path, '到', to.path)
    if (localStorage.getItem('tokenStr')) {
      next()
      // 没有就去登录页面
    } else {
      next('/login')
    }
  } else {
    // 如果你登录了 就回到主页
    if (to.path === '/login' && localStorage.getItem('tokenStr')) {
      next('/')
    } else {
      next()
    }
  }
})
//  导出路由到main.js  要挂载在根实例上
export default router
